 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>子项flex份数</title>
     <style>
         section {
             display: flex;
             width: 80%;
             height: 150px;
             background-color: pink;
             margin: 0 auto;
         }

         section div:nth-child(1) {
             width: 150px;
             height: 150px;
             background-color: skyblue;
         }

         section div:nth-child(2) {
             flex: 1;
             background-color: red;
         }

         section div:nth-child(3) {
             width: 150px;
             height: 150px;
             background-color: green;
         }

         p {
             display: flex;
             width: 80%;
             height: 150px;
             background-color: pink;
             margin: 150px auto;
         }

         p span {
             flex: 1;
         }

         p span:nth-child(2) {
             flex: 2;
             background-color: skyblue;
         }
     </style>
 </head>

 <body>
     <section>
         <div></div>
         <div></div>
         <div></div>
     </section>
     <p>
         <span>1</span>
         <span>2</span>
         <span>3</span>
     </p>
 </body>

 </html>